<template>
  <div class="m-print-order" id="printOrder">
    <div class="app-container prints">
      <div class="content">
        <div class="logo">
          <img src="../../assets/logo-print.png" alt="">
        </div>
        <div class="print-order clearfix">
          <div class="fl buyer-order">
            <span>收货人：{{orderInfo.userName}}</span>
            <br>
            <span>所在地：{{orderInfo.receiverArea}}</span>
            <br>
            <span>下单时间：{{orderInfo.addTime}}</span>
          </div>
          <div class="fl buyer-order">
            <span>电话：{{orderInfo.receiverTelephone || '--'}}</span>
            <br>
            <span>详细地址：{{orderInfo.receiverAreaInfo || '暂无'}}</span>
            <br>
            <span>订单号：{{orderInfo.orderId}}</span>
          </div>
          <div class="fl buyer-order">
            <span>手机号：{{orderInfo.receiverMobile}}</span>
            <br>
            <span>发货单号：{{orderInfo.expressNumber || '--'}}</span>
          </div>
        </div>

        <div class="order-info-tab">
          <table border="1">
            <thead>
              <tr>
                <td>序号</td>
                <td>商品名称</td>
                <td>颜色</td>
                <td>尺码</td>
                <td>单价</td>
                <td>数量</td>
                <td>小计</td>
              </tr>
            </thead>
            <tbody v-for="(goods, goodsIndex) in goodsInfo" :key="goodsIndex">
              <tr v-for="(gsp, gspIndex) in goods.goodsGsp" :key="gspIndex">
                <td>{{gspIndex + 1}}</td>
                <td>
                  <p>{{goods.goods_name}}</p>
                </td>
                <td v-if="gsp.goodsSpecContent && gsp.goodsSpecContent.length">{{gsp.goodsSpecContent[0]}}</td>
                <td v-if="gsp.goodsSpecContent && gsp.goodsSpecContent.length">{{gsp.goodsSpecContent[1]}}</td>
                <td>{{gsp.goodsSinglePrice}}</td>
                <td>{{gsp.count}}</td>
                <td>{{gsp.singleTotalPrice || gsp.goodsSinglePrice * gsp.count}}</td>
              </tr>
            </tbody>
            <tr>
              <td>合计</td>
              <td colspan="4"></td>
              <td>{{goodsTotalcount || 0}}</td>
              <td>{{(orderInfo.goodsPrice || 0) | currency}}</td>
            </tr>
          </table>
        </div>

        <div class="order-all">
          <span>商品总价：{{(orderInfo.goodsPrice || 0) | currency}}</span>
          <span>运费：{{(orderInfo.shipPrice || 0) | currency}}</span>
          <span>优惠：{{orderInfo.subtrahendPrice || 0 | currency}}</span>
          <span>订单总额：{{orderInfo.totalPrice | currency}}</span>
        </div>

        <div style="text-align: center">
          <button class="btn print-btn" @click="onPrint">打印</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { apiOrderMange } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      orderInfo: {}, // 订单信息
      goodsInfo: [], // 商品信息
      goodsTotalcount: 0 // 商品总数
    }
  },
  created() {
    this.fetchOrderInfo()
  },
  computed: {
    ...mapGetters(['token'])
  },
  methods: {
    /**
     * 获取订单详情
     */
    fetchOrderInfo() {
      if (!this.$route.params.orderid) return
      apiOrderMange.apiCOrderInfo(this.token, this.$route.params.orderid, this.$route.query.three).then(data => {
        this.orderInfo = data.data.bean || {}
        this.goodsInfo = JSON.parse(this.orderInfo.goodsInfo || '[]') // 获取商品信息
        this.goodsInfo.forEach(goods => {
          this.goodsTotalcount += goods.goodsTotalcount
        })
      })
    },
    /**
     * 打印
     */
    onPrint() {
      window.print()
    }
  }
}
</script>


<style lang="scss">
.m-print-order {
  .app-container {
    width: 1010px;
  }
}
</style>

<style type="text/css" media="print">
/* 
 * 默认横向打印
 */
@page { 
  size: landscape;
}
</style>

<style lang="scss" scoped>
.m-print-order {
  position: absolute;
  font-size: 12px;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  left: 0;
  top: 0
}
.prints {
  background: #fff;
}
.content {
  margin-top: 5%;
}
.logo {
  width: 150px;
  height: 60px;
  margin: 0 auto;
}
.print-order {
  margin: 30px 0;
  span {
    line-height: 40px;
  }
}
.buyer-order {
  width: 30%;
  text-align: left;
  display: inline-block;
}
.order-info-tab {
  width: 100%;
  margin-bottom: 28px;
  table {
    width: 100%;
    border-color: #ccc;
    td {
      text-align: center;
      height: 58px;
      &:nth-child(1) {
        width: 160px;
      }
      &:nth-child(2) {
        width: 390px;
      }
      &:nth-child(3) {
        width: 180px;
      }
      &:nth-child(4) {
        width: 180px;
      }
      &:nth-child(5) {
        width: 180px;
      }
      &:nth-child(6) {
        width: 180px;
      }
      &:nth-child(7) {
        width: 200px;
      }
    }
  }
  .goods-list {
    width: 100%;
    .goods-info {
      border: 1px solid;
      & > div {
        display: inline-block;
      }
    }
  }
  .all-count {

  }
}
.order-all {
  font-size: 16px;
  margin-bottom: 106px;
  span {
    padding-right: 150px;
  }
}
.print-btn {
  width:140px;
  height:32px; 
  background:rgba(74,144,226,1);
}
</style>
